<template>
  <div class="home">
    {{ msg }}
    <button @click="loginOut">退出登录</button>
    <var-space>
      <img class="uploader-example-file" v-for="f in files" :key="f.id" :src="f.cover" />
      <var-uploader  @after-read="handleAfterRead" maxlength="1" hide-list v-model="files">
        <div class="uploader-example-file">
          <var-button round type="primary" class="upload-icon">
            <var-icon :size="22" name="upload" />
          </var-button>
        </div>
      </var-uploader>
    </var-space>
  </div>
</template>
<script setup>
import { ref } from "vue";
defineProps({
  msg: String,
});
const files = ref([]);
const handleAfterRead =(file)=> {
  file.state = "loading";
  window.$api.file.upload(file).then((res)=> {
    file.state = "success"
  })
  
}

</script>